<template>
	<u-popup :show="showTip" round="20rpx" :mode="mode" @close="showTip = false"
		:customStyle="{margin: mode === 'center' ? '0 32rpx' : ''}">
		<view class="flex modal-title">
			<view class="flex font36 fontbold-500">{{title}}</view>
			<i class="iconfont icon-close font32" @click="showTip = false"></i>
		</view>
		<template v-if="!isSlot">
			<view v-if="mode === 'center'" class="modal-content">
				<view v-for="item in list" :key="item.title" class="flex start item">
					<view>
						<i class="iconfont font28" :class="item.icon" :style="{color: item.color}"></i>
					</view>
					<view>
						<view class="font28">{{item.title}}</view>
						<view class="font24" v-for="itemDes in item.des">{{itemDes}}</view>
					</view>
				</view>
			</view>
			<view v-else class="modal-content">
				<view v-for="item in list" :key="item.title" class="flex between item font28">
					<view>{{item.title}}</view>
					<view>{{item.des}}</view>
				</view>
			</view>
			<view class="modal-footer"
				:style="{padding: mode === 'center' ? '20rpx 64rpx 40rpx 64rpx' : '60rpx 32rpx 40rpx'}">
				<view class="flex submit-btn font32 fontbold-500" :class="{'linear-btn': mode === 'bottom'}"
					@click="showTip = false">确认</view>
			</view>
		</template>
		<slot name="content"></slot>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				showTip: false,
				title: '',
				list: [],
				mode: 'center'
			}
		},
		props: {
			isSlot: Boolean
		},
		mounted() {},
		methods: {
			open(title, list, mode) {
				this.mode = mode || 'center'
				this.title = title
				this.list = list
				this.showTip = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-content {
		padding: 0 60rpx;
		box-sizing: border-box;

		.item {
			align-items: flex-start;
			margin-bottom: 40rpx;

			.iconfont {
				margin-right: 8rpx;
			}

			.font28 {
				height: 30rpx;
				line-height: 30rpx;
			}

			.font24 {
				color: $uni-text-color-grey;
				margin-top: 20rpx;
			}
		}
	}

	.modal-footer {
		padding: 20rpx 64rpx 40rpx 64rpx;
		box-sizing: border-box;

		.submit-btn {
			width: 100%;
			height: 84rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
			border-radius: 100rpx;
			color: $uni-text-color-inverse;
		}

		.linear-btn {
			width: 100%;
			height: 76rpx;
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
			border-radius: 60rpx;
			font-size: 36rpx;
		}
	}
</style>